<div class="container-fluid">
    <div ng-controller="dynamicModelDetailController">
        <div class="row">
            <div class="col-sm-12">
                <form name="dynamicModelDetailForm" class="form-horizontal" role="form" novalidate>
                    <div class="form-group">
                        <label class="col-sm-1 control-label">ID</label>
                        <div class="col-sm-3 form-control-static">{{dynamicModel.id}}</div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label">名称</label>
                        <div class="col-sm-2 form-control-static">{{dynamicModel.name}}</div>
                        <label class="col-sm-1 control-label" style="width: 60px;">宽度</label>
                        <div class="col-sm-2 form-control-static" style="width: 100px;">{{dynamicModel.nameViewWidth}}</div>
                        <label class="col-sm-1 control-label" style="width: 60px;">脚本</label>
                        <div class="col-sm-3 form-control-static" style="width: 450px;"><pre style="max-height: 200px;max-width: 450px;" ng-if="dynamicModel.nameCascadeScript!=null">{{dynamicModel.nameCascadeScript}}</pre></div>
                        <label class="col-sm-1 control-label" style="width: 100px;">验证规则</label>
                        <div class="col-sm-2">
                            <div ng-repeat="(k,v) in dynamicModel.nameValidator track by $index">{{validatorOptions[k]}}:{{v}}&nbsp;</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label">图标</label>
                        <div class="col-sm-3 form-control-static"><span class="glyphicon glyphicon-{{dynamicModel.icon}}"></span></div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label">顶级模型</label>
                        <div class="col-sm-3 form-control-static"><input onclick="return false;" type="checkbox" ng-checked="dynamicModel.isRootChild"/></div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label">子模型</label>
                        <div>
                            <div class="col-sm-1 form-control-static" ng-repeat="child in dynamicModel.children track by $index">{{child.name}}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label">普通属性</label>
                        <div class="col-sm-11">
                            <table class="table table-condensed table-hover">
                                <thead>
                                <tr class="active">
                                    <th width="30" rowspan="2">#</th>
                                    <th colspan="4">布局设置</th>
                                    <th colspan="6">数据设置</th>
                                    <th rowspan="2">&nbsp;</th>
                                </tr>
                                <tr class="active">
                                    <th width="75">可隐藏</th>
                                    <th width="100">分组</th>
                                    <th width="100">标题</th>
                                    <th width="50">宽度</th>
                                    <th width="150">名称</th>
                                    <th width="100">类型</th>
                                    <th width="150">默认值</th>
                                    <th width="150">可选值</th>
                                    <th width="400">级联脚本</th>
                                    <th width="300">验证规则</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="property in dynamicModel.properties track by $index">
                                    <th>{{$index + 1}}</th>
                                    <td><input onclick="return false;" type="checkbox" ng-checked="property.canHide"/></td>
                                    <td>{{property.group}}</td>
                                    <td>{{property.label}}</td>
                                    <td>{{property.viewWidth}}</td>
                                    <td>{{property.name}}</td>
                                    <td>{{typeOptions[property.type]}}</td>
                                    <td>{{property.defaultValue}}</td>
                                    <td><div ng-repeat="optionalValue in property.optionalValues track by $index">{{optionalValue}}&nbsp;</div></td>
                                    <td><pre style="max-height: 200px;max-width: 400px;" ng-if="property.cascadeScript!=null">{{property.cascadeScript}}</pre></td>
                                    <td><div ng-repeat="(k,v) in property.validator track by $index">{{validatorOptions[k]}}:{{v}}&nbsp;</div></td>
                                    <td>&nbsp;</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label">联合属性</label>
                        <div class="col-sm-11">
                            <table class="table table-condensed table-hover">
                                <thead>
                                <tr class="active">
                                    <th width="30" rowspan="2">#</th>
                                    <th colspan="4">布局设置</th>
                                    <th colspan="6">数据设置</th>
                                    <th rowspan="2">&nbsp;</th>
                                </tr>
                                <tr class="active">
                                    <th width="75">可隐藏</th>
                                    <th width="100">分组</th>
                                    <th width="100">标题</th>
                                    <th width="50">宽度</th>
                                    <th width="150">名称</th>
                                    <th width="100">类型</th>
                                    <th width="150">默认值</th>
                                    <th width="150">可选值</th>
                                    <th width="400">级联脚本</th>
                                    <th width="300">验证规则</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="property in dynamicModel.association track by $index">
                                    <th>{{$index + 1}}</th>
                                    <td><input onclick="return false;" type="checkbox" ng-checked="property.canHide"/></td>
                                    <td>{{property.group}}</td>
                                    <td>{{property.label}}</td>
                                    <td>{{property.viewWidth}}</td>
                                    <td>{{property.name}}</td>
                                    <td>{{typeOptions[property.type]}}</td>
                                    <td>{{property.defaultValue}}</td>
                                    <td><div ng-repeat="optionalValue in property.optionalValues track by $index">{{optionalValue}}&nbsp;</div></td>
                                    <td><pre style="max-height: 200px;max-width: 400px;" ng-if="property.cascadeScript!=null">{{property.cascadeScript}}</pre></td>
                                    <td><div ng-repeat="(k,v) in property.validator track by $index">{{validatorOptions[k]}}:{{v}}&nbsp;</div></td>
                                    <td>&nbsp;</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label">快捷预设</label>
                        <div class="col-sm-11">
                            <table class="table table-condensed table-hover">
                                <thead>
                                <tr class="active" ng-if="tableHead.heads.length">
                                    <th width="30" rowspan="2">#</th>
                                    <th width="{{property.span ? '' : property.viewWidth}}" ng-repeat="property in tableHead.groupHeads"
                                        rowspan="{{property.span ? '' : 2}}" colspan="{{!property.span ? '' : property.span}}">
                                        {{property.span ? property.group : property.label}}
                                    </th>
                                    <th rowspan="2">&nbsp;</th>
                                </tr>
                                <tr class="active" ng-if="tableHead.heads.length">
                                    <th width="{{property.viewWidth}}" ng-repeat="property in tableHead.heads" >{{property.label}}</th>
                                </tr>
                                <tr class="active" ng-if="!tableHead.heads.length">
                                    <th width="30">#</th>
                                    <th width="{{property.viewWidth}}" ng-repeat="property in dynamicModel.association">{{property.label}}</th>
                                    <th>&nbsp;</th>
                                </tr>
                                </thead>
                                <tbody >
                                <tr ng-repeat="propertyValue in dynamicModel.predefinedAssociation">
                                    <th>{{$index + 1}}</th>
                                    <td ng-repeat="property in dynamicModel.association" ng-switch="property.type">
                                        <span ng-switch-when="Boolean"><input onclick="return false;" type="checkbox" ng-checked="propertyValue[property.name]"/></span>
                                        <span ng-switch-when="Long">{{propertyValue[property.name]}}</span>
                                        <span ng-switch-when="Double">{{propertyValue[property.name]}}</span>
                                        <span ng-switch-when="String">{{propertyValue[property.name]}}</span>
                                        <span ng-switch-when="Date">{{propertyValue[property.name] | date : 'yyyy-MM-dd'}}</span>
                                        <span ng-switch-when="Enum">{{propertyValue[property.name]}}</span>
                                        <span ng-switch-when="Model">{{propertyValue[property.name]}}</span>
                                    </td>
                                    <td>&nbsp;</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-3 col-sm-offset-5">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary btn-sm" location-back>返回</button>
                                <button type="button" ng-disabled="dynamicModel.developer.id != $security$.user.id" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:void(0);" location-go="/business/dynamicModel/update/{{dynamicModel.id}}">修改</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li ng-class="{'disabled':dynamicModel.generator.isApplied}"><a href="javascript:void(0);" ng-click="delete(dynamicModel)">删除</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>